import React from "react";
import { doLogin } from "@/store/slices/user";
import { Form, Input, Button, Col, Row } from "antd";
import { useDispatch } from "react-redux";
import './loginCss.scss'

export default function Login() {
    const dispatch = useDispatch()

    const userLogin = (params: any) => {
        dispatch(doLogin(params))
    }

    return (
        <div className="formStyle">
            <Form
                onFinish={userLogin}
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
            >
                <Form.Item label="用户名" name="userName" rules={[
                    {
                        required: true,
                        message: '用户名必填'
                    },
                    {
                        pattern: /^[a-z]\w{3,7}$/,
                        message: '4-8位英文、数字、_组成,小写字母开头'
                    }
                ]}>
                    <Input />
                </Form.Item>
                <Form.Item label="密码" name="pwd" rules={[
                    {
                        required: true,
                        message: '密码必填'
                    }
                ]}>
                    <Input type='password' />
                </Form.Item>
                <Form.Item wrapperCol={{ span: 12, offset: 8 }}>

                    <Button htmlType='submit'>登录</Button>

                </Form.Item>

                {/* <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
                    <Button htmlType='reset'>重置</Button>
                </Form.Item> */}
            </Form>
        </div>
    )
}
